<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Safety'})" class="return"></a>
      {{$t('Auxiliaries.v1')}}
		</div>
		<div class="overlay" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling" align="center">
				<van-cell-group>
					<van-field :placeholder="$t('Auxiliaries.v2')" maxlength="20" type="password" v-model.trim="passowrd" />
				</van-cell-group>
				<van-cell-group style="background: #333952;color: #858dac;padding: 0px 15px;" v-if="list != '' && list != null">
					<div style="color: white;font-size: 13px;background: #333952;">
						<van-grid :column-num="5">
							<van-grid-item v-for="(item,index) in list" :key="Math.random()">
							    <div style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;background: rgb(93,107,151);">
							    	<span v-text="item"></span>
							    </div>
							</van-grid-item>
						</van-grid>
					</div>
				</van-cell-group>
				<div>
					<div id="copyText" v-text="listCopy" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
				</div>
				<div style="padding: 10px;">
					<van-button slot="button" size="normal" :disabled="loading" type="info" style="height: 38px;line-height: 36px;" @click="sure">{{$t('Auxiliaries.v3')}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	let _this;
	export default {
		data() {
			return {
				passowrd: '',
				k: '', // 凭证K值
				v: '', // 凭证V值
				loading: true,
				list: [],
				listCopy: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			this.$watch('passowrd', debounce((val) => { // 这里的 val 是输入的值
				if(val) { // 如果存在才执行
					this.getPassWrod(val);
				}
			}, 200));
		},
		mounted() {

		},
		methods: {
			getPassWrod(val) {
				if(this.passowrd == '') {
					this.$toast(this.$t('Auxiliaries.v4'));
					return false;
				}
				if(this.passowrd.length < 6 || this.passowrd.length > 20) {
					this.$toast(this.$t('Auxiliaries.v5'));
					return false;
				}
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getPassWrodZjc({
							'key': this.k,
							'encryptedData': this.rsaEncrypt(val + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								this.list = res.data.trim().split(" ");
								this.loading = false;
								this.listCopy = this.list.join(' ');
							}else{
								this.list = [];
								this.loading = true;
							}
							this.$toast(res.msg);
						})
					}
				})
			},
			sure() { // 复制助记词
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$toast(_this.$t('Auxiliaries.v6'));
					} catch(err) {
						_this.$toast(_this.$t('Auxiliaries.v7'));
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$toast(_this.$t('Auxiliaries.v6'));
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 44px;
	}

	.van-cell {
		background-color: #333952;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
	}

	[class*=van-hairline] {
		position: unset;
		border-bottom: 2px solid #2c3145;
	}

	/deep/ .weui-btn_primary {
		background: #3fb776 !important;
	}

	.van-hairline--top-bottom::after {
		border: 0;
	}

	.btn {
		padding: 30px 10px 0px;
	}

	/deep/ .van-field__control {
		color: #FFFFFF;
	}

	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/.van-cell:not(:last-child)::after {
		border-bottom: 0;
	}

	/deep/ .van-grid-item__content {
		background: #333952;
		padding: 10px 5px;
	}

	/deep/ .van-hairline--top::after {
		border: 0;
	}

	/deep/ .van-grid-item__content::after {
		border: 0;
	}

	/deep/ .van-grid-item__content {
		float: left;
	}
</style>
